<script lang="ts" setup>
  import { Message, Modal } from '@arco-design/web-vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import {
    getServiceCategories,
    deleteServiceCategory,
  } from '@/api-new/service-category';
  import EditModal from './edit-modal.vue';

  // 定义表格列
  const columns = [
    {
      title: '分类ID',
      width: '120',
      dataIndex: 'categoryId',
    },
    {
      title: '分类级别',
      width: '120',
      dataIndex: 'categoryLevel',
      render: ({ record }: any) => {
        const levelMap: Record<number, string> = {
          1: '一级分类',
          2: '二级分类',
          3: '三级分类',
        };
        return levelMap[record.categoryLevel] || '-';
      },
    },
    {
      title: '分类名称',
      width: '200',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'categoryName',
    },
    {
      title: '所含项目总数',
      width: '150',
      dataIndex: 'projectCount',
      render: ({ record }: any) => {
        return record.projectCount || 0;
      },
    },
    {
      title: '创建时间',
      width: '200',
      tooltip: true,
      ellipsis: true,
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      align: 'center' as const,
      width: '180',
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
    },
  ];

  // 使用 usePageTable 管理列表和搜索
  const page = usePageTable({
    searchForm: {
      state: {
        categoryName: '',
      },
    },
    table: {
      rowKey: 'categoryId',
      apiFun: getServiceCategories,
      columns,
    },
  });

  // 使用 useModeModalHandler 管理弹窗
  const editHandler = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });

  // 删除操作
  const onDelete = (record: any) => {
    Modal.warning({
      title: '警告',
      content: `确定要删除分类"${record.categoryName}"吗？`,
      okText: '确定',
      cancelText: '取消',
      hideCancel: false,
      onBeforeOk: (done: any) => {
        deleteServiceCategory(record.categoryId)
          .then(() => {
            done(true);
            Message.success('删除成功！');
            page.reload();
          })
          .catch(() => {
            done(false);
          });
      },
    });
  };

  const scroll = {
    x: 1200,
  };
</script>

<template>
  <div class="flex flex-col">
    <TableLayout
      :scroll="scroll"
      :scrollbar="true"
      v-bind="page.bindProps"
      @create="editHandler.showAdd()"
    >
      <template #searchForm="{ state }">
        <a-form-item field="categoryName" label="分类名称">
          <a-input
            v-model="state.categoryName"
            placeholder="请输入分类名称"
            allow-clear
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-button
            size="small"
            type="text"
            @click="editHandler.showEdit(record)"
          >
            编辑
          </a-button>
          <a-button
            size="small"
            type="text"
            status="danger"
            @click="onDelete(record)"
          >
            删除
          </a-button>
        </a-space>
      </template>
    </TableLayout>

    <!-- 编辑/新增弹窗 -->
    <EditModal v-bind="editHandler.bindProps" />
  </div>
</template>

<style scoped lang="less"></style>
